<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <form @submit.prevent="handler">
            <input type="text">
            <button>提交</button>
        </form>

        <div @click.once="clickhandler">123
            <button @click.stop="btnhandler">我是div的子元素</button>
        </div>

        <!-- 事件目标就是事件源的时候 targethandler被触发  -->
        <div @click.self="targethandler">
            666
            <p>999</p>
        </div>


        <input type="text" @keydown.esc="eschandler" @keydown.enter="enterhandler">
    </div>
    <script src="./node_modules/vue/dist/vue.global.js"></script>

    <script>
        const {createApp} = Vue;

        createApp({
            data(){
                return {

                }
            },
            methods:{
                handler(){
                    console.log('阻止默认行为')
                },
                clickhandler(){
                    console.log('div点击')
                },
                btnhandler(){
                    console.log('我是div的子按钮')
                },
                targethandler(){
                    console.log('hello world')
                },
                eschandler(){
                    console.log('按下了esc键')
                },
                enterhandler(){
                    console.log('按下了回车键 ')
                },

            }
        }).mount('#app')
    </script>
</body>
</html>